  <!-- // 销售数据 -->
<template>
  <div class="bigBox">
    销售数据
    <div class="left" />
    <div>
      <div class="right" />
      <div class="btn">
        <a v-for="(item,index) in time" :key="index" :class="{decide:num === index}" @click="decide(index)">{{ item }}</a>
      </div>

    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { salesDistribution, Sales } from '@/api'
import * as echarts from 'echarts'
const nums = new Date().getDay() === 0 ? 7 : new Date().getDay()
export default {
  data() {
    return {
      options: {},
      option: {},
      num: 0,
      time: ['周', '月', '年'],
      dataValue: [`${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate() - nums}`, moment(new Date()).format('YYYY-MM-DD')]
    }
  },
  mounted() {
    this.echartsS()
    this.echartsF()
  },
  async created() {
    this.left(this.dataValue)
    this.right(this.dataValue)
  },
  methods: {
    async left(dataValue) {
      const { data } = await Sales(1, dataValue[0], dataValue[1])
      console.log(dataValue)
      this.options.xAxis.data = data.xAxis
      this.options.series[0].data = data.series
      var chartDom = document.querySelector('.left')
      var myChart = echarts.init(chartDom)
      myChart.setOption(this.options)
      console.log(data.series)
    },
    async right(dataValue) {
      const { data } = await salesDistribution(dataValue[0], dataValue[1])
      this.option.xAxis.data = data.xAxis
      this.option.series[0].data = data.series
      var chartDom = document.querySelector('.right')
      var myChart = echarts.init(chartDom)
      myChart.setOption(this.option)
    },
    decide(i) {
      this.num = i
      if (i === 0) {
        this.dataValue = [`${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate() - nums}`, moment(new Date()).format('YYYY-MM-DD')]
        this.left(this.dataValue)
        this.right(this.dataValue)
      } else if (i === 1) {
        this.dataValue = [`2022-${new Date().getMonth() + 1}-01`, moment(new Date()).format('YYYY-MM-DD')]
        this.left(this.dataValue)
        this.right(this.dataValue)
      } else {
        this.dataValue = [`${new Date().getFullYear()}-01-01`, moment(new Date()).format('YYYY-MM-DD')]
        this.left(this.dataValue)
        this.right(this.dataValue)
      }
    },
    echartsS() {
      this.options = {
        xAxis: {
          type: 'category',
          data: []

        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line',
            smooth: true
          }
        ]
      }
      // this.options && myChart.setOption(this.options)
    },
    echartsF() {
      this.option = {
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar'
          }
        ]
      }

      // option && myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.left{
  width: 580px;
  height: 352px;
}
.right{
  width: 580px;
  height: 352px;
}
.bigBox{
  padding: 20px;
  width: 1320px;
  margin: 20px;
  display: flex;
    height: calc(40vh - 68px);
    min-height: 352px;
    background: #fff;
    border-radius: 20px;
}
     .btn {
      position: relative;
      top: -350px;
      left: 450px;
      line-height: 34px;
      text-align: center;
      border-radius: 10px;
      display: inline-block;
      width: 129px;
      margin-left: 30px;
      height: 34px;
      background-color: #f7fbff;
      a {
        display: inline-block;
        width: 30px;
      }
}
.decide{
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
    border-radius: 7px;
    font-weight: 600;
    color: #333;
}
</style>
